<template>
  <div class="classify">
    <div class="cate_header" @click="toSearch">
    <VanSearch
      placeholder="请输入搜索关键词"
      input-align="center"
    />
  </div>
  <div class="cate_main">
      <VanSidebar v-model="active" class="main_lift">
        <VanSidebarItem @click="getIndex(index,item.id as number)" 
        :title="item.name as string" 
        :class="{ active:index === index1 }"
        v-for="(item,index) in cate1List" 
        :key="item.id as number"
        />
      </VanSidebar>
    <div class="main_right">
      <div @touchend="stateH" @touchmove="Pulluprefresh" :class="{ move: move === 1 }">
        <div class="right_header">
          <img v-for="item in ImageList" :key="item.id" class="header_img" :src="item.picUrl" alt="">
        </div>
        <div v-for="item in categoryGroupList" :key="item.id">
          <div class="right_title">
            <h1 class="title1">{{ item.name }}</h1>
            <div v-if="index1 > 0" class="title_top"></div>
          </div>
          <div class="right_end">
            <div @click="goPath(attr1.id)" class="end_content" v-for="attr1 in item.categoryList" :key="attr1.id">
              <img class="end_img" :src="attr1.wapBannerUrl" alt="">
              <span class="end_text">{{attr1.name}}</span>
            </div>
          </div>
        </div>
      
      </div>
      
    </div>
  </div>
  <div class="end"></div>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
import { storeToRefs } from 'pinia';
import { getZIndexStyle } from 'vant/lib/utils';
import router from '@/router';
  export default defineComponent({
    name:'Cate'
  })
</script>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import {useCateStore} from '@/stores/modules/cate'
const active = ref(0)
const show_list = ref(true)

const getCateList = useCateStore()

const move = ref(0)

const moves = ref(0)

const lsitID = ref(11)

// 解构需要的数据
const {cate1List,ImageList,categoryGroupList} = storeToRefs(getCateList)

onMounted(()=>{
  getCateList.getCateL1List()
  getIndex(0,11)
})

const index1 = ref(0)

// 获取点击的是哪个下标
const getIndex = (index:number,id:number) => {

  index1.value = index

  lsitID.value = id
  getCateList.getPagingListdData(id)
}


const stateH = (e:any) => {
  move.value = 0
}

const Pulluprefresh = (e:any) => {
  
  if(e.touches[0].clienTY > moves.value && document.documentElement.scrollTop === 0){
    move.value = 1
  }
  
}

const touchstart = (e:any) => {
  moves.value = e.touches[0].clientY
}



const toSearch = () => {
  router.push(
    '/search'
  )
}

const goPath = (attr1:number) =>{
  console.log(attr1,lsitID.value);
  router.push({
    path:'/list',
    query:{
      attr1,
      lsitID:lsitID.value
    }
  })
}

</script>

<style lang="less" scoped>
.classify{
    .cate_header{
    width: 100%;
    height: 54px;
    position: sticky;
    z-index: 999;
    top: 0;
  }
  .end{
    height: 50px;
  }
  .cate_main{
    display: flex;
    width: 100%;
    height: calc(100vh - 105px);
    .main_lift{
      position: fixed;
      border-right: 1px solid #ccc;
    }
    border-top: 1px solid #ccc;
      :deep(.van-sidebar-item--select){
        color: #ab2b2b;
        font-weight: 400;
        &::before{
          height: 20px;
          background-color: #ab2b2b;
        }
      }
      .van-sidebar-item {
       background: none;
      }
    .main_right{
      position: relative;
      top: 0;
      right: -75px;
      width: 260px;
      // border-left: 1px solid #ccc;
      padding-top: 15px;
      padding-bottom: 10.5px;
      padding-left: 15px;
      padding-right: 15px;
      .right_header{
        width: 100%;
        height: 96px;
        margin-bottom: 15px;
        .header_img{
          width: 264px;
          height: 96px;
        }
      }
      .right_title{
        width: 251px;
        margin: auto;
        margin-top: 15px;
        .title_top{
          border-bottom: 2px solid #ededed;
          width: 262px;
        }
        .title1{
          font-size: 16px;
          margin-top: 10px;
          font-weight: 700;
          margin-bottom: 2px;
        }
      }
      .right_end{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .end_content{
          display: flex;
          flex-direction: column;
          width: 72px;
          .end_img{
            width: 72px;
            height: 72px;
        }
          .end_text{
            display: block;
            font-size: 12px;
            text-align: center;
          }
        }
        
      }
    }
  }
  
}

</style>
